<template>
	<view class="sucai">
		<view class="header"><uniNavBar leftImg="/static/h5img/return_black@2x.png" @clickLeft="clickLeft" title="素材收藏"></uniNavBar></view>
		<!-- 收藏列表 -->
		<view class="collect-list">
			<view class="collect-item" v-for="(item, i) in collectData" :key="`content-${i}`">
				<view class="item-top">
					<image class="business-img" :src="`https://static.xpandago.net/${item.brandImg}`"></image>
					<text class="business-title">{{ item.title }}</text>
				</view>
				<view class="item-content">
					<view class="item-description">{{ item.content }}</view>
					<view class="item-img-box">
						<view class="img-box" v-for="img in item.imgArray"><image class="item-img" mode="aspectFit" :src="`https://static.xpandago.net/${img}`" @tap="previewImg(item.imgArray, ind)"></image></view>
					</view>
					<view class="tags">
						<view class="tag-item" v-for="tag in item.tagArray">{{ tag }}</view>
					</view>
					<view class="item-footer">
						<text class="item-time">{{ item.createTime }}</text>
						<view class="operate-btn">
							<view class="delete" @tap="deleteCollect(item.materialId, i)">
								<image class="delete-btn" src="/static/h5img/delete@2x.png"></image>
								<text>删除</text>
							</view>
							<view
								class="down-load"
								@tap="sourceDownload(item.materialId)"
								v-clipboard:copy="item.content"
								v-clipboard:success="type => onCopyResult('success', item)"
								v-clipboard:error="type => onCopyResult('error')"
							>
								<image class="down-load-btn" src="/static/h5img/download@2x.png"></image>
								<text>下载</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="default-Page" v-show="!collectData.length"><image src="/static/h5img/default_04@2x.png" class="default4"></image></view>
		</view>
	</view>
</template>

<script>
import api from '@/common/api';
import { ifLogin } from '@/common/js/index'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	data() {
		return {
			collectData: [],
			token: '',
			page: 1,
			pageSize: 3,
			pageCount: 0
		};
	},
	methods: {
		clickLeft() {
			uni.navigateBack();
		},
		// 图片预览
		previewImg(urlArr, index) {
			const arr = urlArr.map(url => {
				return `https://static.xpandago.net/${url}`
			})
			uni.previewImage({
				urls: arr,
				current:index,
			});
		},
		async sourceDownload(materialId) {
			const data = {};
			if (materialId) {
				data.materialId = materialId;
			}
			const [err, res] = await api.sourceDownload({
				method: 'post',
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
					token: this.token
				},
				query: data
			});
			let copy = false;
			if (res) {
				const { data = {} } = res;
				if (data.code === 0) {
					copy = true;
				}
			}
			return copy;
		},
		async onCopyResult(type, item) {
			if (type === 'success') {
				const copy = await this.sourceDownload(item);
				// item.imgArray.map(v => {
				this.downImg(item.imgArray);
				// })
				uni.showToast({
					title: copy ? '下载成功' : '下载失败',
					icon: 'none'
				});
			} else {
				if (type === 'error') {
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			}
		},
		downImg(imgArr) {
			const that = this;
			imgArr.forEach(src => {
				uni.downloadFile({
					url: `https://static.xpandago.net/${src}`,
					success: res => {
						if (res.statusCode === 200) {
							that.saveImg(res.tempFilePath);
						}
					}
				});
			});
		},
		saveImg(url) {
			var oA = document.createElement('a');
			oA.setAttribute('crossOrigin', 'Anonymous');
			oA.download = ''; // 设置下载的文件名，默认是'下载'
			oA.href = url;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
		},
		// 获取素材收藏列表
		async getCollectList() {
			let _this = this;
			const query = {
				page: this.page,
				limit: this.pageSize
			};
			_this.token = uni.getStorageSync('token');
			const [err, res] = await api.userCollect({
				method: 'get',
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
					token: _this.token
				},
				query
			});
			if (res) {
				const { data = {} } = res;
				if (data.code === 0 && data.data && data.data && data.data.list) {
					_this.collectData = [..._this.collectData, ...data.data.list];
					_this.pageCount = data.data.totalPage || 0;
				}
			}
		},
		// 删除收藏列表
		async deleteCollect(materialId, i) {
			console.log(materialId, 'materialId');
			const data = {};
			if (materialId) {
				data.materialId = materialId;
			}
			const [err, res] = await api.deleteCollect({
				method: 'post',
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
					token: this.token
				},
				query: data
			});
			if (res) {
				const { data = {} } = res;
				if (data.code === 0) {
					this.collectData.splice(i, 1);
				}
			}
		}
	},
	components: {
		uniNavBar
	},
	onLoad() {
		const status = ifLogin()
		if (status) {
			this.getCollectList();
		}
	},
	onReachBottom() {
		console.log(this.pageCount, this.page);
		if (this.pageCount > this.page) {
			this.page += 1;
			this.getCollectList();
		}
	}
};
</script>

<style scoped lang="scss">
body,
uni-page-body {
	background-color: #f7f7f7;
}
.sucai {
	.header {
		position: fixed;
		display: fixed;
		width: 100%;
		z-index: 10;
	}
	.collect-list {
		position: absolute;
		background-color: #f7f7f7;
		height: 100%;
		overflow: auto;
		padding-bottom: 40rpx;
		width: 100%;
		box-sizing: border-box;
		&::before {
			content: '';
			height: 88rpx;
			display: block;
		}
		.collect-item {
			margin-top: 20rpx;
			padding: 0 32rpx 0 16rpx;
			background-color: #fff;
			.item-top {
				padding-top: 31rpx;
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				.business-img {
					height: 64rpx;
					width: 64rpx;
					border-radius: 50%;
					margin: 0 17rpx;
				}
				.business-title {
					font-family: PingFang-SC-Medium;
					font-size: 26rpx;
					color: #333333;
				}
			}
			.item-content {
				padding-left: 99rpx;
				.item-description {
					font-family: PingFang-SC-Medium;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #333;
					margin-bottom: 7rpx;
					word-break: break-all;
				}
				.item-img-box {
					display: flex;
					flex-wrap: wrap;
					.img-box {
						width: 33.3%;
						display: flex;
						&:nth-child(3n + 2) {
							justify-content: space-around;
						}
						&:nth-child(3n) {
							justify-content: flex-end;
						}
					}
					.item-img {
						height: 186rpx;
						width: 186rpx;
						margin-top: 21rpx;
					}
				}
			}
			.tags {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-left: -12rpx;
				.tag-item {
					border: 1rpx solid #ddd;
					height: 46rpx;
					margin-top: 25rpx;
					border-radius: 20rpx;
					padding: 0 24rpx;
					margin-left: 16rpx;
					font-size: 26rpx;
					font-family: PingFang-SC-Medium;
					color: #999;
				}
			}
			.item-footer {
				margin-left: 4rpx;
				margin-top: 11rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				color: #999;
				.item-time {
					font-size: 22rpx;
					line-height: 40rpx;
				}
				.operate-btn {
					display: flex;
					.down-load {
						font-size: 22rpx;
						margin-left: 22rpx;
						display: flex;
						align-items: center;
						.down-load-btn {
							height: 25rpx;
							width: 25rpx;
							margin-right: 12rpx;
						}
					}
					.delete {
						font-size: 22rpx;
						display: flex;
						align-items: center;
						.delete-btn {
							width: 24rpx;
							height: 24rpx;
							margin-right: 14rpx;
						}
					}
				}
			}
		}
	}

	.default-Page {
		height: calc(100% - 88rpx);
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.default4 {
			height: 560rpx;
			width: 440rpx;
		}
	}
}
</style>
